<template>
  <section>
    <section class="mk-add-pop" style="margin-top:2rem">
      <el-form ref="formAdd" :model="form" :rules="rules" label-width="100px">
        <mk-get-row>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" size="mini" class="input-one" clearable placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="职称" prop="post">
           
            <el-select v-model="form.post" placeholder="请选择"   size="mini">
                <el-option
                v-for="item in postOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          
        </mk-get-row>
        
        
        <mk-get-row>
          <el-form-item label="微信/电话" prop="phone">
            <el-input v-model="form.phone" size="mini" class="input-one" clearable placeholder="请输入微信/电话"></el-input>
          </el-form-item>
          <el-form-item label="电子邮件" prop="email">
            <el-input v-model="form.email" size="mini" class="input-one" clearable placeholder="请输入电子邮件"></el-input>
          </el-form-item>
          
        </mk-get-row>
        <mk-get-row>
          
         <el-form-item label="QQ" prop="QQ">
              <el-input v-model="form.QQ" size="mini" class="input-one" clearable placeholder="请输入QQ"></el-input>
          </el-form-item>
          <el-form-item label="位置" prop="position">
            <el-input v-model="form.position" size="mini" class="input-one" clearable placeholder="请输入位置"></el-input>
          </el-form-item>
          
        </mk-get-row>
         <mk-get-row>
          <el-form-item label="工作年限+" prop="workYears">
             <el-input-number v-model="form.workYears" :precision="0" :step="1" :max="100" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="项目数+" prop="projectItems">
             <el-input-number v-model="form.projectItems" :precision="0" :step="1" :max="100" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="公司数+" prop="companyNum">
             <el-input-number v-model="form.companyNum" :precision="0" :step="1" :max="100" :min="0"></el-input-number>
          </el-form-item>
         </mk-get-row>
        <mk-get-row>
           
          <el-form-item label="自我介绍" prop="selfIntroduction">
            <el-input v-model="form.selfIntroduction" size="mini"
                      type="textarea"
                      :rows="3"
                     style="width: 450px"
                      clearable placeholder="自我介绍"></el-input>
          </el-form-item>
           <el-form-item label="座右铭" prop="motto">
            <el-input v-model="form.motto" size="mini" style="width:500px" clearable placeholder="请输入座右铭"></el-input>
          </el-form-item>
        </mk-get-row>
        <el-divider/>
        <mk-get-button @save="save" :disClose="true" :disSave="!permBtn.saveButton"/>
      </el-form>
    </section>
  </section>

</template>

<script>
import MkGetRow from "@/components/common/mk-get-row";
import MkGetButton from "@/components/common/mk-get-button";
import MkBackList from "@/components/common/mk-back-list";
import {setInformation,getInformation} from "@/api/modules/sys.personal.information.api";
import MkUpload from "@/components/common/mk-upload";
import util from "@/libs/util";

export default {
  name: 'get-information-info',
  components: { MkUpload, MkBackList, MkGetButton, MkGetRow},
  props: {
    updateData: {
      type: Object,
      default() {
        return {};
      }
    },
  },
    created() {
        this.getPerms()
      this.getInformation()
    
  },
  data() {
    return {
      commonKey: 0,
      form: {
   
        },
        postOptions: [{ value: "售前工程师", label: '售前工程师' },
            { value: "实施工程师", label: '实施工程师' },
            { value: "后端开发工程师", label: '后端开发工程师' },
            { value: "前端开发工程师", label: '前端开发工程师' },
            { value: "开发工程师", label: '开发工程师' },
            { value: "需求分析工程师", label: '需求分析工程师' },
            { value: "测试工程师", label: '测试工程师' },
            { value: "运维工程师", label: '运维工程师' },
  
            { value: "项目经理", label: '项目经理' },
            { value: "项目助理", label: '项目助理' },
               { value: "售后工程师", label: '售后工程师' },
        ],
      permBtn:{
        saveButton:false,
       
      },
      rules: {
        name: [{required: true, message: '请输入姓名', trigger: 'blur'},],
          post: [{ required: true, message: '请输入职称', trigger: 'blur' },],
          motto: [{ required: true, message: '请输入座右铭', trigger: 'blur' },],
          workYears: [{ required: true, message: '请输入工作年限', trigger: 'blur' },],
        projectItems: [{required: true, message: '请输入项目数', trigger: 'blur'},],
          companyNum: [{ required: true, message: '请输入公司数', trigger: 'blur' },],
          phone: [{ required: true, message: '请输入微信/电话', trigger: 'blur' },],
          email: [{ required: true, message: '请输入电子邮件', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ],
          QQ: [{ required: true, message: '请输入QQ', trigger: 'blur' },],
          position: [{ required: true, message: '请输入所在地', trigger: 'blur' },],
         selfIntroduction: [{ required: true, message: '请输入自我介绍', trigger: 'blur' },],
      }
    }
  },
  methods: {
    save() {
      this.$refs['formAdd'].validate((valid) => {
        if (valid) {
          setInformation(this.form).then(res => {
              this.$toast.success( '保存成功！' )
            this.getInformation()
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      },
      getInformation() { 
          try {
              getInformation().then( res => { 
              
                if ( res &&  res.id) { 
                     this.form = res
                } 

                console.log( this.form)
                
            } )
          } catch (e) { 

          }
            
      },
      getPerms() {
      let perms =JSON.parse(util.cookies.get('permMenus'))
      if (perms.includes('*')) {
        this.permBtn.saveButton = true;
      } else {
        if (perms.includes('POST /api/private/information/setInformation')) {
          this.permBtn.saveButton = true;
        }
        
      }
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
